<template>


    <div class="root-1">
        <router-view />

        <van-tabbar route>
            <van-tabbar-item replace to="/index">
                  <span>外卖</span>
    <template #icon="">
      <i class="el-icon-eleme"></i>
    </template>
            </van-tabbar-item>
            <van-tabbar-item replace to="/seek" icon="search">
                搜索
            </van-tabbar-item>

            <van-tabbar-item replace to="/indent" icon="orders-o">
                订单
            </van-tabbar-item>
            <van-tabbar-item replace to="/my" icon="contact">
                我的
            </van-tabbar-item>
        </van-tabbar>


<!--    <div class="root">-->
<!--        <div>-->
<!--            <i class="el-icon-eleme"></i>-->
<!--            <p>外卖</p>-->
<!--        </div>-->
<!--        <div>-->
<!--            <van-icon name="search" />-->
<!--            <p>搜索</p>-->
<!--        </div>-->
<!--        <div>-->
<!--            <i class="el-icon-tickets"></i>-->
<!--            <p>订单</p>-->
<!--        </div>-->
<!--        <div>-->
<!--            <i class="el-icon-s-custom"></i>-->
<!--            <p>我的</p>-->
<!--        </div>-->
<!--    </div>-->
    </div>
</template>

<script>
    export default {
        name: "Ibottom"
    }
</script>

<style scoped>
.root{
    background-color: #fff;
    position: fixed;
    z-index: 100;
    bottom: 0;
    width: 100%;
    height: 3rem;
    display: flex;
    box-shadow: 0 -0.02667rem 0.05333rem rgba(0,0,0,.1);
}
    .root div{
        width: 200px;
        text-align: center;
    }
.el-icon-eleme{
    font-size: 20px;
}
    .root p{
        font-size: 10px;
        color: #666;
    }
</style>